import { Text, StyleSheet, View, Dimensions, TextInput, SafeAreaView, ScrollView, Image, Clipboard, Pressable } from 'react-native'
import React, { Component, useState, useRef } from 'react'
import { connect } from 'react-redux'
import { asyncGetBrowserSearchLogs, SetBrowserSearchLogs } from "../../redux/features/dappSlice"
import { pTx } from "../../utils/dimensions"
import { popularDapp, BSCDapp } from "../../utils/browserDapp"
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import Realm from "realm"
import { Toast, SwipeCell } from '@pingtou/rn-vant';
import IconFont from '@pingtou/rn-vant-icons'

const MyDapp = (props) => {
    const swipeCellRefs = useRef()
    const realm = useRealm();
    const browserSearchLogs = useQuery(schemaName.BrowserSearchLogs).sorted('time', true)
    const onToSubmit = (item) => {
        props.navigation.navigate('web3View', { url: item.url })
        realm.write(() => {
            realm.create(schemaName.BrowserSearchLogs, {
                ...item,
                time: Date.parse(new Date()) / 1000,
            }, true)
        })
    }
    const deleteItem = (item) => {
        swipeCellRefs[item._id + ""]?.close()
        setTimeout(() => {
            realm.write(() => {
                realm.delete(item);
            });
        }, 200)
    }
    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.page}>
                <ScrollView style={styles.scrollView}>
                    <View style={styles.history}>
                        <View style={styles.historyRow}>
                            {browserSearchLogs.map((item, index) => {
                                return <SwipeCell ref={(ref) => {
                                    if (ref) swipeCellRefs[item._id + ""] = ref;
                                }} key={index} rightAction={
                                    <View style={styles.deleteLinkButton}>
                                        <Text style={styles.deleteLink} onPress={() => deleteItem(item)}>删除</Text>
                                    </View>
                                }>
                                    <Pressable onPress={() => onToSubmit(item)} onLongPress={() => {
                                        Clipboard.setString(item.url)
                                        Toast(item.url + " 已复制")
                                    }} >
                                        <View style={styles.historyCell} >
                                            {
                                                item.icon ?
                                                    <Image resizeMode="contain" style={styles.historyImage} defaultSource={require('../../assets/image/icon40.png')} source={{ uri: item.icon }}></Image>
                                                    :
                                                    <Image resizeMode="contain" style={styles.historyImage} source={require('../../assets/image/icon40.png')}></Image>

                                            }
                                            <View style={styles.historyInfo}>
                                                <Text style={styles.historyCellName} selectable={true} numberOfLines={2}>{item.title || '网页无法打开'}</Text>
                                                <Text style={styles.historyCellLink} ellipsizeMode={'tail'} numberOfLines={1}>{item.url}</Text>
                                            </View>
                                        </View>
                                    </Pressable>
                                </SwipeCell>
                            })}
                        </View>
                    </View>
                </ScrollView>
            </View>
        </SafeAreaView>
    )
}
const mapStateToProps = (state) => state.dapp
const mapDispatchToProps = {
    asyncGetBrowserSearchLogs,
    SetBrowserSearchLogs
}
export default connect(mapStateToProps, mapDispatchToProps)(MyDapp)


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff"
    },
    page: {
        flex: 1,
    },
    scrollView: {
        paddingHorizontal: pTx(15),
    },
    historyRow: {
        marginTop: pTx(12),
    },
    historyCell: {
        paddingBottom: pTx(12),
        marginBottom: pTx(12),
        flexDirection: 'row',
        alignItems: "center",
        borderBottomWidth: 1,
        borderBottomColor: "rgba(175, 181, 189, 0.15)"
    },
    historyInfo: {
        marginLeft: pTx(12),
    },
    historyImage: {
        width: pTx(50),
        height: pTx(50),
        borderRadius: pTx(15),
        borderColor: "rgba(175, 181, 189, 0.2)",
        borderWidth: 1,
    },
    historyCellName: {
        fontSize: pTx(16),
        color: "rgba(10, 12, 20, 1)",
        maxWidth: pTx(280),
    },
    historyCellLink: {
        // marginTop: pTx(2),
        fontSize: pTx(13),
        color: "rgba(175, 181, 189, 1)"
    },
    deleteLinkButton: {
        flexDirection: 'row',
        alignItems: "center",
        justifyContent: "center",
        width: pTx(50),
        height: pTx(50),
        backgroundColor: "rgb(238, 10, 36)",
    },
    deleteLink: {
        color: "#fff",
        textAlign: "center"
    }
})